<template>
  <div class="data-statistics c6-container">
    <ContentForm name="1C检测数据" :isshowref="isshowrefresh">
      <div slot="valueform" class="tableContainer widthPage v-flex-elastic" :class="{ foremZank: isActive }" style="height: calc(100%);">
        <filter-form :form="listQuery" :data="filterData" :has-default-operation="false" @search="search">
          <el-date-picker
            v-model="listQuery.beginDate"
            value-format="yyyy-MM-dd"
            type="date"
            class="eldateNewS"
            placeholder="选择开始时间"
            :picker-options="pickerFindStartDate"
            :clearable="true"
            style="margin-right: 10px;"
            size="mini" />
          <el-date-picker
            v-model="listQuery.endDate"
            value-format="yyyy-MM-dd"
            type="date"
            class="eldateNewS"
            placeholder="请选择结束时间"
            :picker-options="pickerFindEndDate"
            :clearable="true"
            style="margin-right: 10px;"
            size="mini" />
          <el-button
            class="search-btn"
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="search">查询</el-button>
          <el-button class="refresh-btn" size="mini" type="primary" icon="el-icon-refresh" @click="resetListQuery">重置</el-button>
        </filter-form>
        <div style="height: calc(100% - 50px);">
          <el-table
            v-loading="this.tableData.loading"
            :data="tableData.tableList"
            height="100%"
            border
            stripe>
            <el-table-column
              label="序号"
              type="index"
              width="50"
              align="center" />
            <el-table-column
              prop="deptName"
              label="部门"
              sortable
              width="100"
              top
              align="center" />
            <el-table-column
              prop="seclineName"
              label="线路"
              sortable
              width="120"
              align="center" />
            <el-table-column
              prop="directionName"
              label="行别"
              align="center"
              sortable
              width="90" />
            <el-table-column
              prop="startSiteName"
              label="计划起站"
              align="center"
              sortable
              width="120" />
            <el-table-column
              prop="endSiteName"
              label="计划止站"
              align="center"
              sortable
              width="120" />
            <el-table-column
              prop="detectDate"
              label="检测日期"
              sortable
              width="120"
              top
              align="center" />
            <el-table-column
              prop="packetName"
              label="数据包"
              sortable
              show-overflow-tooltip
              align="center" />
            <el-table-column
              prop="packageSize"
              width="90"
              label="数据包大小（KB）"
              align="center">
              <!-- <template slot-scope="scope">
                <el-popover trigger="hover" placement="bottom">
                  <p>{{ scope.row.station }}</p>
                  <div slot="reference">
                    {{ scope.row.station }}
                  </div>
                </el-popover>
              </template> -->
            </el-table-column>
            <el-table-column
              width="180"
              align="center"
              fixed="right">
              <template slot="header">
                操作
              </template>
              <template slot-scope="scope">
                <el-button
                  class="refresh-btn"
                  size="mini"
                  type="primary"
                  style="padding:8px 6px;"
                  @click="showDetail(tableData.tableList[scope.$index])">查看原始数据</el-button>
                <el-button
                  type="primary"
                  size="mini"
                  style="padding:10px 6px;"
                  @click="exportListFile(scope.row)">导出</el-button>
                <!--                <el-button-->
                <!--                  type="primary"-->
                <!--                  size="mini"-->
                <!--                  style="padding:10px 6px;"-->
                <!--                  @click="showDefectDetail(tableData.tableList[scope.$index])">查看缺陷</el-button> -->
                <!--                <a class="el-icon-view" @click="showDetail(tableData.tableList[scope.$index])" />-->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <Pagination
            :hidden="false"
            :total="tableData.total"
            :page.sync="listQuery.page"
            :size.sync="listQuery.size"
            @pagination="getListPage" />
        </div>
      </div>

    </ContentForm>
    <div class="phm-tanc" :class="{ phmtancshow: isActive }">
      <span v-if="isActive" class="el-icon-close closePosition" @click="isActive=!isActive" />
      <A1C style="height: calc(100% - 50px);" :row-data="rowData" :active-analysis="isActive" />
    </div>

    <div class="phm-tanc" :class="{ phmtancshow: isActiveDefect }">
      <span v-if="isActiveDefect" class="el-icon-close closePositionNew" @click="isActiveDefect=!isActiveDefect" />
      <A1CDefect style="height: calc(100% - 50px);" :row-data="rowData" :defectc="isActiveDefect" />
    </div>
  </div>
</template>

<script>
// 检测数据查询
// import globalUploader from '@/components/FileUploader'
import A1C from './A1cAnalysis.vue'
import ContentForm from '@/components/ContentForm'
import { getToken } from '@/utils/auth'
import { findManageUnitDeptList, getLineList, getDirectionList } from '@/api/platform'
import { find1cDetectData } from '@/api/cms/detect-data'
import { parseTime } from '@/utils'
export default {
  components: {
    //global Uploader,
    A1C,
    ContentForm
  },
  data() {
    return {
      isshowrefresh: true,
      isActive: false,
      isActiveDefect: false,
      // 满足六个段接口请求标识
      unitDeptCode: '',
      filterData: {
        deptId: {
          width: 'auto',
          clearable: true,
          key: 'unitDeptCode',
          type: 'select',
          title: '单位',
          placeholder: '请选择单位',
          options: [],
          props: { label: 'deptName', value: 'deptNo' },
          changeFn: (vm) => {
            if (vm) {
              this.unitDeptCode = vm
              this.filterData['directionId'].options = []
              this.filterData['lineId'].options = []
              this.tableData.tableList = []
              this.listQuery = {
                unitDeptCode: vm,
                lineId: '',
                directionId: '',
                beginDate: '',
                endDate: '',
                startSiteName: '',
                endSiteName: '',
                packetName: '',
                page: 1,
                size: 20
              }
              this.getList() // 加载下拉信息列表
              this.getListPage() // 查询列表信息
              // getLineList({ unitDeptCode: vm }).then(response => {
              //   this.filterData.lineId.options = Object.freeze(response.data)
              // })
            }
          }
        },
        directionId: {
          width: 'auto',
          clearable: true,
          key: 'directionId',
          type: 'select',
          title: '行别',
          placeholder: '行别',
          options: [],
          props: {
            label: 'directionName',
            value: 'directionId'
          }
        },
        lineId: {
          clearable: true,
          width: 'auto',
          key: 'lineId',
          type: 'select',
          title: '线路',
          placeholder: '请选择线路',
          options: [],
          props: {
            label: 'seclineName',
            value: 'seclineId'
          }
        }
      },
      listQuery: {
        unitDeptCode: null,
        lineId: '',
        directionId: '',
        beginDate: '',
        endDate: '',
        page: 1,
        size: 20
      },
      tableData: {
        total: 0,
        tableList: [],
        loading: false
      },
      rowData: {},
      // 时间区间选择
      pickerFindStartDate: this.handleFindStartDate(),
      pickerFindEndDate: this.handleFindEndDate(),
      detectJobId: '',
      parseTime: parseTime
    }
  },
  mounted() {
    this.initPage()
    // this.search()
  },
  methods: {
    // 初始化页面
    initPage() {
      // 获取当前登入人可以管理的部门所属单位列表
      findManageUnitDeptList().then(response => {
        var resData = response.data

        for (var i in resData) {
          if (resData[i].deptNo === '001200') {
            resData.splice(i, 1)
          }
        }
        // 通过单位标识确定接口，连接各段的数据库
        if (resData.length !== 0) {
          this.filterData['deptId'].options = response.data
          this.unitDeptCode = response.data[0].deptNo
          this.listQuery.unitDeptCode = response.data[0].deptNo
        }
        this.getList() // 加载下拉信息列表
        this.getListPage()
      })
    },
    // 下拉数据获取
    getList() {
      this.filterData['directionId'].options = []
      this.filterData['lineId'].options = []
      // 查询线路树信息列表
      getLineList({ unitDeptCode: this.unitDeptCode }).then(response => {
        this.filterData['lineId'].options = response.data
      })
      // 查询行别信息列表
      getDirectionList({ unitDeptCode: this.unitDeptCode }).then((response) => {
        this.filterData['directionId'].options = response.data
      })
    },
    // 查询列表信息
    getListPage() {
      this.tableData.loading = true
      // 查询列表信息
      find1cDetectData(this.listQuery).then((response) => {
        this.tableData.tableList = response.data.records
        this.tableData.total = response.data.total
        this.tableData.loading = false
      }).catch(() => {
        this.tableData.loading = false
      })
    },
    search() {
      this.listQuery.page = 1
      this.getListPage() // 查询列表信息
    },
    resetListQuery() {
      this.listQuery = {
        unitDeptCode: '',
        lineId: '',
        directionId: '',
        beginDate: '',
        endDate: '',
        page: 1,
        size: 20
      }
      this.tableData.tableList = []
      this.filterData['deptId'].options = []
      this.filterData['lineId'].options = []
      this.filterData['directionId'].options = []
      this.initPage()
    },
    showDetail(item) {
      this.detectJobId = item.id
      this.isActive = !this.isActive
      this.rowData = Object.assign({}, item)
    },
    showDefectDetail(row) {
      this.detectJobId = row.id
      this.isActiveDefect = !this.isActiveDefect
      this.rowData = Object.assign({}, row)
    },
    // 查询发现开始日期控制
    handleFindStartDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.listQuery.endDate) {
            return new Date(self.listQuery.endDate) - 8.64e6 < time.getTime()
          }
        }
      }
    },

    // 查询发现结束日期控制
    handleFindEndDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.listQuery.beginDate) {
            return new Date(self.listQuery.beginDate) - 8.64e7 > time.getTime()
          }
        }
      }
    },
    exportListFile(row) {
      var url = process.env.VUE_APP_BASE_API + '/cms/detect1cData/exportList?1=1'
      if (row.id) {
        url += '&detectJobId=' + row.id
      }

      url += '&access_token=' + getToken()
      var fileName = '缺陷单位分布.xls'
      window.location.href = url
    }
  }
}
</script>
<style scoped>
.closePosition{
  position: absolute;
  z-index: 10;
  font-size: 24px;
  color:white;
  right: 20px;
  top: 14px;
}

</style>
